<template>
	<view class="container">
		<scroll-view scroll-x="true" @scroll="scrollEvt" class="scroll-box">
			<view class="item-box" :style="{'--col': grid_columns}">
				<view class="items flex-1" v-for="i in itemList">{{i+1}}</view>
			</view>
		</scroll-view>
		<!-- 缩略滚动条 -->
		<view class="mini-scroll flex-1">
			<view class="mini-box">
				<view class="mini-item" :style="{'left': miniLeft + 'px'}"></view>
			</view>
		</view>

		<!-- 设置小项数量 -->
		<view class="little-box">
			<view class="little-title">设置小项数量</view>
			<view class="little-content">
				<view :class="['little-item flex-1', numIdx==index&&'active']" v-for="(item, index) in setNumList"
					:key="index" @click="setNumEvt(item,index)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				num: 9,
				grid_columns: 0,
				scrollW: 0,
				miniLeft: 0,


				// 设置小项参数
				setNumList: [9, 20, 31, 49, 58],
				numIdx: 0
			}
		},
		onLoad() {
			this.init()
		},
		mounted() {
			// 获取滚动视口的宽度
			uni.createSelectorQuery().in(this).select('.scroll-box').boundingClientRect(rect => {
				this.scrollW = rect.width
			}).exec()
		},
		methods: {
			init() {
				for (var i = 0; i < this.num; i++) {
					this.itemList.push(i)
				}

				this.grid_columns = Math.ceil(this.num / 2)
			},
			scrollEvt(e) {
				// 获取滚动区域宽度
				let scrollWidth = e.detail.scrollWidth
				// 计算滚动区域滚动条最大可以移动距离
				let scrollMax = scrollWidth - this.scrollW
				// 获取缩略滚动条可最大移动的距离
				let miniMax = 100 - 30
				// 计算缩略滚动区域与滚动区域移动比
				let MaxRes = miniMax / scrollMax
				// 获取当前滚动条移动的距离
				let scrollLeft = e.detail.scrollLeft
				// 把滚动条移动距离按比例映射到缩略滚动区域上
				this.miniLeft = Math.min(scrollLeft * MaxRes)
				/**
				 * 计算滚动条的移动比例，将内容滚动的比例映射到滑块的移动范围内
				 * 滑块能够移动距离 比上 大容器能够滑动的距离,映射出 比率,最高就是 100% 嘛,等比换算
				 */
			},
			setNumEvt(item, index) {
				this.numIdx = index
				this.num = item
				this.itemList = []
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #F6F6F6;

		.scroll-box {
			height: 100px;
			background-color: skyblue;
			padding: 10rpx 0;

			.item-box {
				height: 100%;
				display: grid;
				grid-template-columns: repeat(var(--col), 25%);
				gap: 10rpx;

				.items {
					background: pink;
					border-radius: 5px;
				}
			}
		}

		.mini-scroll {
			height: 30px;

			.mini-box {
				width: 100px;
				height: 4px;
				background-color: #888;
				border-radius: 50px;
				position: relative;

				.mini-item {
					position: absolute;
					width: 30px;
					height: 4px;
					background-color: pink;
					border-radius: 50px;
					top: 0;
				}
			}
		}

		.little-box {
			margin-top: 100px;

			.little-title {
				font-weight: 600;
				font-size: 18px;
				height: 30px;
			}

			.little-content {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
				padding: 0 10rpx;

				.little-item {
					height: 40px;
					border: 1px solid #888;
					box-sizing: border-box;

					&.active {
						color: #FFF;
						border: 1px solid pink;
						background: #888;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>